<template>
  <div class="product-container">
    <h1 class="page-title">商品列表</h1>
    
    <!-- 循环渲染每个分类 -->
    <div v-for="(category, categoryIndex) in productCategories" 
         :key="categoryIndex" 
         class="category-card">
      
      <!-- 分类标题 -->
      <h2 class="category-title">
        {{ category.name }}
        <span class="item-count">({{ category.items.length }}件商品)</span>
      </h2>
      
      <!-- 循环渲染分类下的商品 -->
      <ul class="product-list">
        <li v-for="(product, productIndex) in category.items" 
            :key="productIndex" 
            class="product-item">
          {{ product.name }} - ¥{{ product.price }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义商品数据
const productCategories = ref([
  {
    name: '电子产品',
    items: [
      { name: '手机', price: 3999 },
      { name: '耳机', price: 599 },
      { name: '笔记本电脑', price: 6999 },
      { name: '智能手表', price: 1599 }
    ]
  },
  {
    name: '食品',
    items: [
      { name: '面包', price: 10 },
      { name: '牛奶', price: 8 },
      { name: '巧克力', price: 15 },
      { name: '薯片', price: 6 }
    ]
  },
  {
    name: '服装',
    items: [
      { name: 'T恤', price: 99 },
      { name: '牛仔裤', price: 299 },
      { name: '运动鞋', price: 499 }
    ]
  }
]);
</script>

<style scoped>
.product-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.page-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.category-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.category-title {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-count {
  font-size: 0.8em;
  color: #7f8c8d;
  font-weight: normal;
}

.product-list {
  list-style-type: none;
  padding: 0;
}

.product-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  color: #555;
}

.product-item:last-child {
  border-bottom: none;
}
</style>
